<template>
  <div class="generator-page">
    <div class="hero">
      <div class="title">
        <span class="dot" />代码生成器
      </div>
      <div class="desc">选择数据库表，一键生成后端与前端基础 CRUD 模板，支持批量删除与菜单占位。</div>
    </div>

    <el-card class="mb16">
      <el-form inline class="toolbar">
        <el-form-item>
          <el-input v-model="keyword" size="small" placeholder="表名/备注 关键字" clearable style="width:260px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="loadTables" :loading="loading">查询表</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="force">覆盖生成</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="success" size="small" :disabled="!selectedTable" @click="doGenerate">生成代码</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table
        :data="tables"
        highlight-current-row
        @current-change="onSelect"
        border
        stripe
        height="60vh"
        v-loading="loading"
        :empty-text="emptyText"
      >
        <el-table-column prop="tableName" label="表名" min-width="280" />
        <el-table-column prop="tableComment" label="备注" min-width="360" />
        <el-table-column label="生成状态" width="140">
          <template #default="{ row }">
            <el-tag :type="row.generatedAt ? 'success' : 'info'">{{ row.generatedAt ? '已生成' : '未生成' }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import generatorApi from '@/api/tools/generator'
import type { AxiosResponse } from 'axios'
import { ElMessage } from 'element-plus'

const keyword = ref('')
const tables = ref<any[]>([])
const selectedTable = ref<any>(null)
const force = ref(false)
const loading = ref(false)
const emptyText = ref('暂无数据，请点击“查询表”获取最新数据')

function loadTables(){
  loading.value = true
  generatorApi.listTables(keyword.value)
    .then((res: AxiosResponse<any>) => {
      tables.value = (res.data?.data || res.data || []) as any[]
      if (tables.value.length === 0) emptyText.value = '未查询到表，请调整关键字后重试'
    })
    .finally(() => loading.value = false)
}

function onSelect(row:any){
  selectedTable.value = row
}

async function doGenerate(){
  if (!selectedTable.value){ ElMessage.warning('请选择表'); return }
  if (selectedTable.value.generatedAt && !force.value){
    ElMessage.warning('该表已生成过。如需覆盖，请勾选“覆盖生成”。')
    return
  }
  await generatorApi.generate({ tableName: selectedTable.value.tableName, force: force.value })
  ElMessage.success('生成完成，请到项目输出目录查看')
}
</script>

<style scoped>
.generator-page { display: flex; flex-direction: column; gap: 12px }
.mb16{ margin-bottom:16px }
.hero{ padding: 14px 6px 4px 6px; border-radius: 8px; background: linear-gradient(135deg, var(--el-color-primary-light-9), transparent) }
.title{ font-size: 18px; font-weight: 600; display:flex; align-items:center; gap:8px; color: var(--el-text-color-primary) }
.title .dot{ width:10px; height:10px; border-radius:50%; background: var(--el-color-primary); box-shadow: 0 0 8px var(--el-color-primary) }
.desc{ color: var(--el-text-color-secondary); font-size: 13px; margin-top: 4px }
.toolbar{ display:flex; gap:8px; align-items:center }
</style>


